<template>
  <el-card class="filter-card" :body-style="{ padding: '15px' }">
    <DynamicForm
      ref="formRef"
      v-model="formData"
      :form-config="formConfig"
      :gutter="16"
      type="search"
      @search="handleSearch"
      @reset="handleReset"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import DynamicForm from "@/components/DynamicForm/index.vue";
import type { DynamicFormInstance } from "@/components/DynamicForm/types";
import type { FormItemConfig } from "@/components/DynamicForm/types";

// 定义属性和事件
const props = defineProps({
  showAdvanced: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["search"]);

const formRef = ref<DynamicFormInstance>();

// 表单数据
const formData = reactive({
  time_range: "7d",
  asset_ip: "",
  risk_level: "",
  change_type: "",
  score_min: 60,
  score_max: 100,
  department: "",
  template: "default_v1",
  sort_by: "score_time",
  sort_order: "desc",
});

// 表单配置
const formConfig: FormItemConfig[] = [
  {
    key: "time_range",
    name: "时间范围",
    type: "select",
    placeholder: "选择时间范围",
    params: {
      clearable: false,
    },
    options: [
      { label: "今天", value: "today" },
      { label: "最近7天", value: "7d" },
      { label: "最近30天", value: "30d" },
      { label: "本月", value: "month" },
      { label: "上月", value: "lastmonth" },
      { label: "自定义", value: "custom" },
    ],
    defaultValue: "7d",
    col: { span: 4 },
  },
  {
    key: "asset_ip",
    name: "资产IP",
    type: "input",
    placeholder: "输入资产IP",
    params: {
      clearable: true,
    },
    col: { span: 4 },
  },
  {
    key: "risk_level",
    name: "风险等级",
    type: "select",
    placeholder: "选择风险等级",
    params: {
      clearable: true,
    },
    options: [
      { label: "低风险", value: "low" },
      { label: "中等风险", value: "medium" },
      { label: "高风险", value: "high" },
      { label: "严重风险", value: "critical" },
    ],
    col: { span: 4 },
  },
  {
    key: "change_type",
    name: "变更类型",
    type: "select",
    placeholder: "选择变更类型",
    params: {
      clearable: true,
    },
    options: [
      { label: "自动计算", value: "自动计算" },
      { label: "人工调整", value: "人工调整" },
    ],
    col: { span: 4 },
  },
  // {
  //   key: "score_min",
  //   name: "分数范围",
  //   type: "number",
  //   placeholder: "最小",
  //   params: {
  //     min: 0,
  //     max: 100,
  //     step: 1,
  //   },
  //   defaultValue: 60,
  //   col: { span: 2 },
  // },
  // {
  //   key: "score_max",
  //   name: "",
  //   type: "number",
  //   placeholder: "最大",
  //   params: {
  //     min: 0,
  //     max: 100,
  //     step: 1,
  //   },
  //   defaultValue: 100,
  //   col: { span: 2 },
  // },
  {
    key: "department",
    name: "部门筛选",
    type: "select",
    placeholder: "选择部门",
    params: {
      clearable: true,
    },
    options: [
      { label: "全部", value: "" },
      { label: "技术部", value: "tech" },
      { label: "运维部", value: "ops" },
      { label: "财务部", value: "finance" },
      { label: "市场部", value: "marketing" },
    ],
    col: { span: 4 },
  },
  {
    key: "template",
    name: "模板筛选",
    type: "select",
    placeholder: "选择模板",
    params: {
      clearable: false,
    },
    options: [
      { label: "默认模板v1", value: "default_v1" },
      { label: "增强模板v2", value: "enhanced_v2" },
      { label: "精简模板v3", value: "simple_v3" },
    ],
    defaultValue: "default_v1",
    col: { span: 4 },
  },
  {
    key: "sort_by",
    name: "排序方式",
    type: "select",
    placeholder: "选择排序",
    params: {
      clearable: false,
    },
    options: [
      { label: "评分时间倒序", value: "score_time" },
      { label: "分数倒序", value: "total_score" },
      { label: "风险等级倒序", value: "risk_level" },
    ],
    defaultValue: "score_time",
    col: { span: 4 },
  },
];

// 方法 - 搜索
const handleSearch = (data: any) => {
  emit("search", data);
};

// 方法 - 重置
const handleReset = () => {
  formData.time_range = "7d";
  formData.asset_ip = "";
  formData.risk_level = "";
  formData.change_type = "";
  formData.score_min = 60;
  formData.score_max = 100;
  formData.department = "";
  formData.template = "default_v1";
  formData.sort_by = "score_time";
  formData.sort_order = "desc";
  emit("search", { ...formData });
};

// 暴露方法给父组件
const resetForm = () => {
  handleReset();
};

defineExpose({
  resetForm,
});
</script>

<style scoped lang="scss">
.filter-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

::v-deep .el-form-item {
  margin-bottom: 10px;
}
</style>
